<script setup lang="ts">
//移动端首页
import { ref } from "vue";
import axios from "axios";
import Waterfall from "@/components/block/waterfall.vue";

import { dataLocal } from "@/store/store";
//准备移动端数据
const mobile_data = dataLocal.home?.mobile;

//获取ajax地址
const ajaxurl = dataLocal.site.ajaxurl;

//存储变量值
const getData = ref(mobile_data);

//获取的顺序值
const offset = ref(10);

//发出请求获取数据
//TODO:进行功能抽离，方便复用
const getAxios = async () => {
  try {
    const response = await axios.get(
      ajaxurl + "?action=save_object_option&offset=" + offset.value + "&limit=12"
    );
    const data = response.data.content;
    getData.value.push(...data);
    offset.value = offset.value + 12;
    return data; // 更新响应式数据
  } catch (error) {
    console.error("请求出错：" + error);
    return getData.value.push(); // 更新响应式数据
  }
};
//提供ID，发出请求返回值
//将数据填充至数组
const printfData = () => {
  console.log(getData.value);
  console.log(offset.value);
};
</script>
<template>
  <Waterfall :data="getData" />
<!-- 
  TODO:下滑自动获取数据岂不更好？再添加一个，已经加载到底部啦，的提示
-->
  <button type="button" @click="getAxios" class="apply-button get">
    获取数据
  </button>
  <button type="button" @click="printfData" v-show="false">打印数据</button>
</template>
<style scoped lang="less">
.get {
  display: block;
  margin: 20px auto;
}
</style>
